<!--
/**
* Author: gaohui
* Date: 2023-03-07 17:46
* Desc: MyTableColumn 表格列组件
*/
-->

<template>
  <el-table-column v-bind="$attrs" :show-overflow-tooltip="true" align="center">
    <template v-slot="scope">
      <slot v-bind="scope">
        <render-dom :value="defaultVal(scope)" :render-fn="render" :scope="scope" />
      </slot>
    </template>
  </el-table-column>
</template>
<script name="MyTableColumn" inheritAttrs="false" lang="ts" setup>
import { useAttrs } from "vue";
import RenderDom from "./RenderDom";

const props = defineProps({
  render: Function,
});

const attrs = useAttrs();
const defaultVal = ({ row }) => {
  if (props.render) {
    return "";
  }
  const prop = (attrs.prop || "") as string;
  if (!prop) {
    return "";
  }
  // 对象属性遍历，例如 row.info.name
  const propArray = prop.split(".").filter(Boolean);
  let target = row;
  for (let i = 0; i < propArray.length; i++) {
    const key = propArray[i];
    target = target[key];
    if (!target) {
      return target;
    }
  }
  return target;
};
</script>
<style lang="scss" scoped></style>
